<template>
	<!-- 我的等级 -->
	<view class="uservipnew">
		<view class="bgi"> <image src="/static/images/bg01.png" mode=""></image> </view>
		<view class="member-center">
			<!-- #ifdef MP -->
			<NavBar titleText="会员中心"  :iconColor="iconColor" :textColor="iconColor" :isScrolling="scrollY>10 ? true : false" showBack></NavBar>
			<!-- #endif -->
			<!-- <image v-show="currentIndex == index" v-for="(item, index) in VipList" :src="item.image" mode="aspectFill" class="headerBg"></image> -->
		</view>	
		<view class="user_vip_new">
			<view :class="tabindex == index ? 'user_vip_acts':'user_vip_tabs'"  @click="tabfun(index)" v-for="(item, index) in VipList" :key="index" >
				{{ item.name }}
				<view v-if="tabindex == index" class="user_vip_line"></view> 
			</view>
		</view>
		<image v-if="tabindex == 0 && userInfo.level.indexOf('5') == -1" class="user_vip_img01" @click="drawMemberCard" :src="imgHost+'/static/images/vipnew001.png'" mode=""></image>
		<image v-if="tabindex == 0 && userInfo.level.indexOf('5') != -1" class="user_vip_img01" :src="imgHost+'/static/images/vip_02.png'" mode=""></image>
		<image v-if="tabindex == 1" class="user_vip_img01"  @click="popupFun(0)" :src="imgHost+'/static/images/vip11.png'" mode=""></image>
		<image v-if="tabindex == 2" class="user_vip_img01" @click="popupFun(1)" :src="imgHost+'/static/images/vip22.png'" mode=""></image>
		<image v-if="tabindex == 3" class="user_vip_img01" :src="imgHost+'/static/images/vip33.png'" mode=""></image>
		
		<view class="user_vip_img">
			<image :class="tabindex == 0 ? 'user_vip_img03':'user_vip_img02'" :src='VipList[tabindex].vip_image' mode="widthFix"></image>
		</view>
		<!-- 会员299 -->
		<view class="user_vip_button" v-if="tabindex == 0">
			<view class="user_vip_btn" @click="vipFun('/pages/users/user_vip_experience/index')">会员明细</view>
			
		</view>
		<view class="user_vip_button" v-if="tabindex == 1 || tabindex == 2" >
			<view class="user_vip_btn" @click="vipFun('/pages/users/user_vip_gift/index')">我的会员</view>
		</view>
		
		<!-- 立即开通弹出层 -->
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" :style="pickindex==1 ? 'height: 300rpx;':'height: 700rpx;'">
			<view class="popupPickcard">
				<view :class="pickindex==1 ? 'popupPicktextact':'popupPicktext'" @click="picktabFun(1)">线上领卡</view>
				<view :class="pickindex==2 ? 'popupPicktextact':'popupPicktext'"  @click="picktabFun(2)">线下领卡</view>
			</view>
			<view class="popupPickForm" v-if="pickindex==2">
				<input v-model="name" class="input" name="name" type="text" placeholder="请输入姓名" placeholder-style="color:#CCCCCC" />
				<input v-model="mobile" class="input" name="mobile" type="text" placeholder="请输入手机号" maxlength="11" placeholder-style="color:#CCCCCC" />
				<input v-model="address" class="input" name="address" type="text" placeholder="请输入收货地址" placeholder-style="color:#CCCCCC" />
			</view>
			<!-- 按钮 -->
			<view class="popupPickBtn">
				<view class="popupPickcancle" @click="closeFun"> 取消</view>
				<view class="popupPickconfirm" @click="pay">确认</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		getlevelInfo,
		userLevelGrade,
		userLevelTask,
		userLevelDetection,
		getSignStatus,
		memberCard,
		memberCardDraw,
		memberCardCreate,
		groomList,
		memberOverdueTime
	} from '@/api/user.js';
	import {
		orderOfflinePayType
	} from '@/api/order.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		openPaySubscribe
	} from '@/utils/SubscribeMessage.js';
	import dayjs from '@/plugin/dayjs/dayjs.min.js';
	import recommend from '@/components/recommend/index.vue';
	import home from '@/components/home/index.vue';
	
	import NavBar from '@/components/NavBar';
	import {
		HTTP_REQUEST_URL
	} from '@/config/app.js';
	export default {
		components: {
			recommend,
			NavBar
		},
		data() {
			return {
				tabindex:0,
				// #ifdef MP
				iconColor: '#000000',
				isScrolling: true,
				// #endif
				scrollY: 0, //页面滚动高度
				// #ifdef H5
				isWeixin: this.$wechat.isWeixin(),
				// #endif
				type: '',
				svip: {},
				memberTypeList:[],
				memberIndex:0,
				isShowAuth: false,
				
				
				reach_count: 0,
				VipList: [],
				currentIndex: 0,
				growthValue: true,
				task: [], //任务列表
				illustrate: '', //任务说明
				level_id: 0, //任务id,
				hostProduct: [],
				grade: 0,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				hotScroll: false,
				hotPage: 1,
				hotLimit: 10,
				level_title: '',
				level_discount: '',
				levelInfo: {},
				
				userInfo: {},
				taskInfo: {},
				is_open_member: false, //判断是否开启付费会员
				// 领卡
				pickindex:1,
				
				name:'',
				mobile:'',
				address:'',
				
				imgHost:HTTP_REQUEST_URL,
			};
		},
		computed: mapGetters(['isLogin']),
		watch: {
			VipList: function() {
				let that = this;
				if (that.VipList.length > 0) {
					that.VipList.forEach(function(item, index) {
						if (item.is_clear === false) {
							that.activeIndex = index;
							that.grade = item.grade;
						}
					});
				}
			},
		},
		onLoad() {
			this.getlevelInfo();
			this.onLunch();
		},
		onShow() {
			
		},
		onPageScroll(e) {
			this.scrollY = e.scrollTop;
		},
		methods: {
			tabfun(i){
				this.tabindex = i
			},
			goLogin(){
				toLogin();
			},
			// 卡密兑换
			drawMemberCard() {
				if(this.isLogin){
					uni.navigateTo({
						url: '/pages/annex/vip_paid_active/index?type='+1
					})
				}else{
					toLogin();
				}
			},
			vipFun(url){
				uni.navigateTo({
					url:url
				})
			},
			onLunch() {
				this.memberCard();
				this.groomList();
			},
			// 立即开通
			pay() {
				this.createMemberCard('weixin');
			},
			// 立即购买
			createMemberCard(type) {
				uni.showLoading({
					title: '正在加载…'
				});
				let query = {
					pay_type: type || this.payMode[0].value,
					type: '1',
					// #ifdef H5
					from: this.isWeixin ? 'weixin' : 'weixinh5',
					// #endif
					// #ifdef MP
					from: 'routine',
					// #endif
					// #ifdef APP-PLUS
					from: 'weixin',
					// #endif
					member_type: this.memberTypeList[this.memberIndex].id,
					price: this.memberTypeList[this.memberIndex].pre_price,
					money: this.memberTypeList[this.memberIndex].price,
					collection_type:this.pickindex,
					
					// #ifdef H5
					quitUrl: location.port ? location.protocol + '//' + location.hostname + ':' + location.port +
						'/pages/annex/vip_paid/index' : location.protocol + '//' + location.hostname +
						'/pages/annex/vip_paid/index'
					// #endif
				};
				if(this.pickindex == 2){
					query.name=this.name,
					query.mobile=this.mobile,
					query.address=this.address
					
					if (!this.name) {
						return this.$util.Tips({
							title: '请输入姓名'
						})
					}
					if (!this.mobile) {
						return this.$util.Tips({
							title: '请输入手机号'
						})
					}
					if (!this.address) {
						return this.$util.Tips({
							title: '请输入收货地址'
						})
					}
				}
				
				// #ifdef MP
				openPaySubscribe().then(() => {
					memberCardCreate(query).then(res => {
						uni.hideLoading()
						uni.redirectTo({
							url: `/pages/goods/cashier/index?order_id=${res.data.order_id}&from_type=vip`
						})
					}).catch(err => {
						uni.showToast({
							title: err
						});
						this.closeFun()
					});
				});
				// #endif
				// #ifndef MP
				memberCardCreate(query).then(res => {
					uni.hideLoading()
					uni.redirectTo({
						url: `/pages/goods/cashier/index?order_id=${res.data.order_id}&from_type=vip`
					})
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					});
					this.closeFun()
				});
				// #endif
			},
			
			getMemberCard() {
				memberCard().then(res => {
					let data = res.data;
					this.memberType = data.member_type;
					this.memberRights = data.member_rights;
					this.isGetFree = data.is_get_free;
				}).catch(err => {
			
				});
			},
			memberSelect(index) {
				this.memberSelected = index;
			},
			// 付费会员数据
			memberCard() {
				uni.showLoading({
					title: '正在加载…'
				});
				memberCard().then(res => {
					uni.hideLoading();
					const {
						is_get_free,
						member_coupons,
						member_explain,
						member_rights,
						member_type
					} = res.data;
					this.isGetFree = is_get_free;
					this.userInfo = is_get_free.user_info;
					this.memberRights = member_rights;
					this.memberType = member_type;
					this.memberCoupons = member_coupons;
					this.memberExplain = member_explain;
					if (is_get_free.is_record) {
						this.memberType = this.memberType.filter(item => item.type !== 'free');
					};
					this.totalPrice = parseFloat(this.memberType[0].pre_price);
					this.type = this.memberType[0].type;
					this.totalPrice = parseFloat(this.memberType[0].pre_price);
					this.svip = this.memberType[0];
					memberOverdueTime({
						member_type: this.svip.type,
						vip_day: this.svip.vip_day
					}).then(res => {
						this.memberEndTime = res.data.data;
					});
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					});
				});
			},
			groomList() {
				if (this.finished) {
					return;
				}
				uni.showLoading({
					title: '加载中'
				});
				groomList(5, {
					page: this.page,
					limit: this.limit
				}).then(res => {
					uni.hideLoading();
					this.goodsList = this.goodsList.concat(res.data.list);
					this.finished = res.data.list.length < this.limit;
					this.page += 1;
				}).catch(err => {
					uni.hideLoading();
				});
			},
			
			getlevelInfo: function() {
				getlevelInfo().then(res => {
					const {
						level_info,
						level_list,
						member_type,
						task,
						user
					} = res.data;
					this.is_open_member = user.is_open_member;
				
				
					this.levelInfo = level_info;
					this.VipList = level_list;
					this.memberTypeList = member_type;
					console.log("会员类型id",this.svip)
					this.userInfo = user;
					this.taskInfo = task;
					this.levelInfo.exp = parseFloat(this.levelInfo.exp);
					this.levelInfo.rate = Math.floor(this.levelInfo.exp / this.levelInfo.exp_num * 100);
					if (this.levelInfo.rate > 100) {
						this.levelInfo.rate = 100;
					}
					const index = level_list.findIndex(({
						grade
					}) => grade === level_info.grade);
					if (index !== -1) {
						this.currentIndex = index;
					}
				});
			},
			picktabFun(i){
				this.pickindex = i;
			},
			popupFun(e){
				this.memberIndex = e;
				this.$refs.popup.open()
			},
			closeFun(){
				this.$refs.popup.close()
			}
			
		},
		onReachBottom() {
			
		}
	}
</script>

<style lang="scss" scoped>
	.bgi{
		width: 100%;
		height: 630rpx;
		position: absolute;
		top:0;
		left: 0;
		z-index: -1;
	}
	.bgi image{
		width: 100%;
		height: 100%;
	}
	.user_vip_new{
		width: 100%;
		height: auto;
		padding: 30rpx 0 0 0;
		box-sizing: border-box;
		display: flex;
		// justify-content: center;
		align-items: baseline;
		overflow-x: scroll;
		white-space: nowrap;
	}
	.user_vip_tabs{
		flex: 0 0 auto;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(157, 86, 10, 1);
		text-align: center;
		vertical-align: middle;
		margin: 0 30rpx;
	}
	.user_vip_acts{
		flex: 0 0 auto;
		font-size: 32rpx;
		font-weight: 700;
		color: rgba(157, 86, 10, 1);
		text-align: center;
		margin: 0 40rpx;
	}
	.user_vip_line{
		width: 32rpx;
		height: 6rpx;
		border-radius: 6rpx;
		background: rgba(157, 86, 10, 1);
		margin: 16rpx auto 0;
	}
	.user_vip_img{
		width: 100%;
		height: auto;
		padding-bottom: 220rpx;
		box-sizing: border-box;
	}

	.user_vip_img01{
		width: 706rpx;
		height: 266rpx;
		margin: 30rpx auto 24rpx;
		display: block;
	}
	.user_vip_img02{
		width: 690rpx;
		height: 1410rpx;
		margin: auto;
		display: block;
	}
	.user_vip_img03{
		width: 690rpx;
		height: 730rpx;
		margin: auto;
		display: block;
		
	}
	.user_vip_button{
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		background-color: #ffffff;
		height: auto;
		padding: 30rpx 0rpx 80rpx 0rpx;
		box-sizing: border-box;
		width: 100%;
	}
	.user_vip_btn{
		margin: auto;
		width: 690rpx;
		height:80rpx;
		border-radius: 60rpx;
		background: linear-gradient(90deg, rgba(246, 229, 180, 1) 0%, rgba(252, 187, 122, 1) 100%), linear-gradient(90deg, rgba(70, 69, 83, 1) 0%, rgba(52, 47, 62, 1) 100%);
		font-size: 28rpx;
		font-weight: 400;
		line-height: 80rpx;
		color: #000000;
		text-align: center;
	}
	.popupPickcard{
		width: 100%;
		height: auto;
		overflow: hidden;
		view:nth-child(1){
			border-bottom: 2rpx solid #eee;
		}
	}
	.popupPicktext{
		width: 100%;
		height: 80rpx;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 80rpx;
		color: #000;
		text-align: center;
		
	}
	.popupPicktextact{
		width: 100%;
		height: 80rpx;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 80rpx;
		color: #1DB0FC;
		text-align: center;
	}
	.popupPickForm{
		width: 100%;
		height: 350rpx;
		margin-top: 30rpx;
		.input{
			height: 88rpx;
			padding: 0 24rpx;
			border: 1rpx solid #eee;
			border-radius: 16rpx;
			margin-bottom: 40rpx;
			background: rgba(255, 255, 255, 0.6);
			font-size: 30rpx;
			color: #333333;
		}
	}
	.popupPickBtn{
		width: 100%;
		height: auto;
		overflow: hidden;
		display: flex;
		justify-content: center;
		margin-top: 40rpx;
	}
	.popupPickBtn view{
		width: 278rpx;
		height: 72rpx;
		font-size: 24rpx;
		line-height: 72rpx;
		text-align: center;
		margin: 0 10rpx;
		border-radius: 40rpx;
	}
	.popupPickcancle{
		border: 1rpx solid #1DB0FC;
		color: #1DB0FC;
	}
	.popupPickconfirm{
		background-color: #1DB0FC;
		color: #ffffff;
	}
	
</style>
<style>
	.uservipnew .uni-popup .uni-popup__wrapper{
		background-color: #ffffff !important;
		border-radius: 30rpx 30rpx 0 0 !important;
		/* height: 700rpx !important; */
		padding: 30rpx !important;
		box-sizing: border-box !important;
	}
</style>